<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="99px">
        <div class="row">
          <el-form-item label="学科" prop="subject">
          <el-select v-model="formData.subject" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in subjectOptions" :key="index" :label="item.label"
              :value="item.label" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="secondary">
          <el-select v-model="formData.secondary" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in secondaryOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="label">
          <el-select v-model="formData.tags" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in labelOptions" :key="index" :label="item.tagName"
              :value="item.id" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyWord">
          <el-input v-model="formData.keyword" placeholder="请输入关键字" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        </div>
        <div class="row">
          <el-form-item label="试题类型" prop="testType">
          <el-select v-model="formData.questionType" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in testTypeOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="formData.difficulty" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="formData.direction" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="updater">
          <el-select v-model="formData.creator" placeholder="请选择" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in updaterOptions" :key="index" :label="item.username"
              :value="item.id" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        </div>
        <div class="last-row">
          <el-form-item label="题目备注" prop="remark">
          <el-input v-model="formData.remark" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" prop="abbreviation">
          <el-input v-model="formData.enterprise" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="provinces">
            <div class="city">
              <el-select :style="{width: '50%'}" v-model="formData.provinces">
                <el-option v-for="(item, index) in provincesOptions" :key="index" :label="item.label"
              :value="item.label" :disabled="item.disabled"></el-option>
              </el-select>
              <el-select :style="{width: '50%'}" v-model="formData.citys">
                <el-option v-for="(item, index) in citysOptions" :key="index" :label="item.label"
              :value="item.label" :disabled="item.disabled"></el-option>
              </el-select>
            </div>
        </el-form-item>
         <el-form-item size="mini" class="submit" >
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
        </div>

    </el-form>
  </div>
</template>
<script>
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
import { list as userList } from '../../api/base/users'
import { list as questionList } from '../../api/hmmm/questions'
import { provinces, citys } from '../../api/hmmm/citys'
import { list } from '../../api/hmmm/tags'
import { simple, detail } from '../../api/hmmm/subjects'
import eventBus from '../../utils/eventBus'
export default {
  components: {},
  props: [],
  data () {
    return {
      middleList: {},
      renderList: {},
      questionsList: [],
      currentSubject: {},
      formData: {
        subject: undefined,
        secondary: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creator: undefined,
        remark: undefined,
        enterprise: undefined,
        provinces: undefined,
        citys: undefined
      },
      rules: {
        subject: [],
        secondary: [],
        label: [],
        keyword: [],
        testType: [],
        difficulty: [],
        direction: [],
        updater: [],
        field120: [],
        field121: [],
        field122: []
      },
      subjectOptions: [],
      secondaryOptions: [],
      labelOptions: [],
      testTypeOptions: questionType,
      difficultyOptions: difficulty,
      directionOptions: [],
      updaterOptions: [],
      provincesOptions: [],
      citysOptions: [],
      value: []
    }
  },
  computed: {
    newSubject () {
      return this.formData.subject
    },
    newProvinces () {
      return this.formData.provinces
    }
  },
  watch: {
    async newSubject (val) {
      this.currentSubject.id = val
      const { data } = await detail(this.currentSubject)
      // 判断是否拥有二级目录
      if (data.twoLevelDirectory !== 0) {
        this.secondaryOptions = data.twoLevelDirectory
      } else {
        this.secondaryOptions = [{
          label: '暂无数据'
        }]
      }
    },
    newProvinces (val) {
      this.formData.citys = ''
      citys(val)
      // 格式化城市
      const newcitys = []
      citys(val).forEach((item, index) => {
        newcitys.push({ label: `${item}`, value: `${index}` })
      })
      this.citysOptions = newcitys
    },
    formData: {
      handler (newval, oldval) {
        console.log(newval)
        for (const key in newval) {
          if (newval[key]) {
            this.middleList[key] = newval[key]
          }
        }
        this.renderList = this.middleList
        this.middleList = {}
        console.log(this.renderList)
      },
      deep: true
    }
  },
  async created () {
    const { data } = await simple()
    this.subjectOptions = data

    // 获取标签列表
    const tagsList = await list()
    this.labelOptions = tagsList.data.items
    // 获取题库列表
    const questionsList = await questionList()
    this.questionsList = questionsList.data.items
    // 格式化direction数据
    const newDirection = []
    direction.forEach((item, index) => {
      newDirection.push({ label: `${item}`, value: `${index}` })
    })
    this.directionOptions = newDirection
    // 格式化省份
    const newprovinces = []
    provinces().forEach((item, index) => {
      newprovinces.push({ label: `${item}`, value: `${index}` })
    })
    this.provincesOptions = newprovinces
    // 录入人
    const users = await userList()
    this.updaterOptions = users.data.list
  },
  mounted () {},
  methods: {
    submitForm () {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
        for (const key in this.formData) {
          if (this.formData[key]) {
            this.middleList[key] = this.formData[key]
          }
        }
        this.renderList = this.middleList
        this.middleList = {}
        eventBus.$emit('screenData', this.renderList)
        this.renderList = {}
      })
    },
    resetForm () {
      this.$refs.elForm.resetFields()
    }

  }
}
</script>
<style scoped lang="less">
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 25%;
  flex: 25%;
  // margin-right: 0px;
  margin: 0 10px 10px 10px;
}
/deep/.el-form-item__content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  // .el-button {
  //   // margin-left: 20px;
  // }
}
.row {
  display: flex;
}
.last-row {
  display: flex;
}
</style>
